<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <style>
        .text {
            font-size: 30px;
            text-align: center;
        }

        body {
            background-image: url(img/bg.jpg)
        }

       .form {
            width: 550px;
            height: 400px;
            border: 1px solid rgb(145, 14, 14);
            background-color: rgba(221, 199, 126, 0.88);
            margin: 120px auto;
        }

         .center_btn {
            text-align: center;
        }
    </style>

    <script>
        const request = new XMLHttpRequest();
        /* 
            需求1：判断两次输入的密码是否相同

            需求2：判断邮箱格式是否满足规范
                    卡住了
            需求3：判断用户注册的手机号是否是未注册过的
                    通过Ajax请求将手机号发送到服务端进行验证
         */
        function checkForm() {
            // console.log("提交表单");
            
            //判断需求1和需求2都满足的时候才提交
            return checkPassword()&&checkEmail();
        }

        /* 
            判断两次输入的密码是否相同     
         */
        function checkPassword() {
            const pwdObj1 = document.querySelector("#password")
            const pwdObj2 = document.querySelector("#rePassword")

            // console.log(pwdObj1.value)
            // console.log(pwdObj2.value)

            //两次输入的密码一样
            if(pwdObj1.value==pwdObj2.value){
                return true;
            }else{
                //两次输入的密码不一样,加入提示

                pwdObj2.setAttribute("class","form-control is-invalid")
                // pwdObj2.setAttribute("class","is-invalid")
                
                return false;
            }

        }
        const rg = /^[\w]{3,6}@qq.com$/
        function checkEmail(){
            const emailObj = document.querySelector("#emailText")
            // console.log(emailObj.value)

            /* 
                如何判断邮箱地址是否满足条件？
                        111@qq.com
                        具体要求：
                                数字和字母开始 +@ +字母 + . + .com结尾
                        这个需要判断的字符串是变化的，不是固定的，
                        需要使用正则表达式
             */
             return false;
            console.log(emailObj.value)

            emailObj.addEventListener("blur",function(){
                console.log("hh")
            })

            // if(rg.test(emailObj.value)){
            //     return true;
            // }else{
            //     return false;
            // }
        }

        /* 
            判断用户注册的手机号是否是未注册过的
            给文本框绑定以恶搞blur事件
         */
         window.addEventListener("load",function(){
             const phonenumberObj = document.querySelector("#phonenumber1")
             phonenumberObj.addEventListener("blur",function(){
                 /* 
                    判断1：手机号的长度是否是11位
                  */
                  if(phonenumberObj.value.length != 11){
                    //   console.log("手机号不满足要求")
                      phonenumberObj.setAttribute("class","form-control is-invalid")
                    return false;
                  }else{
                    phonenumberObj.setAttribute("class","form-control is-valid")

                  }
                  /* 
                    判断2：  手机号是否满足规范要求
                            是否都是和整数  ：可以遍历字符串，判断每一个整数是否是0~9的区间，并且第一位不是0，是1
                   */
                   /* 
                        判断3： 需要请求后端服务器，判断这个手机号在后台的数据库是否存在，然后服务端再把结果发回来
                    */
                    request.open("GET","http://www.biwuit.cn/spboot/checkPhoneNumberExists?phonenumber="+phonenumberObj.value)
                    request.send();

                      request.onreadystatechange = function(){
                if(request.status==200&&request.readyState==4){
                    console.log(request.responseText)
                    const responseValue = JSON.parse(request.responseText)
                    if(responseValue.msg =="手机号已经存在"){
                        phonenumberObj.className = "form-control is-invalid"
                    }else{
                        phonenumberObj.className = "form-control is-valid"
                    }
                }}

                    
             })

            const emailObj = document.querySelector("#emailText")
            emailObj.addEventListener("blur",function(){
                // console.log("haha")
                if(rg.test(emailObj.value)){
                    console.log("格式正确")
                    emailObj.setAttribute("class","form-control is-valid")
                }else {
                    console.log("格式错误")
                    emailObj.setAttribute("class","form-control is-invalid")

                }
            })
             
         })
    </script>
</head>

<body>
    <!-- 
        onsubit:提交form表单，如果onsubmit指定的函数返回true就会正常提交，返回false就不会提交
     -->
    <!-- <form class="form" onsubmit="return checkForm();"> -->
            <form class="form" >


        <!-- 
            offset-sm-2:向右偏移两个格子

         -->
        <div class="alert alert-primary text">新用户注册</div>

        <div class="form-group row">
            <label for="username" class="col-sm-2 offset-sm-2 col-form-label">手机号码</label>
            <div class="col-sm-6">
                <input name="phonenumber" type="text" class="form-control " id="phonenumber1" placeholder="请输入手机号" required>
                <div class="valid-feedback">
                    满足要求
                </div>
                <div class="invalid-feedback">
                    手机号注册过
                </div>
                <small id="passwordHelpInline" class="form-text text-muted">
                    手机号必须是未注册过的.
                </small>
            </div>
        </div>

        <div class="form-group row">
            <label for="password" class="col-sm-2 offset-sm-2 col-form-label">密码</label>
            <div class="col-sm-6">
                <input name="pwd" type="password" class="form-control" id="password" placeholder="请输入密码" required>
                <small id="passwordHelpInline" class="form-text text-muted">
                    密码必须是6-16位
                </small>
            </div>
        </div>

        <div class="form-group row">
            <label for="rePassword" class="col-sm-2 offset-sm-2 col-form-label">确认密码</label>
            <div class="col-sm-6">
                <input name="rePwd" type="password" class="form-control" id="rePassword" placeholder="请输入重复密码" required>
                <div class="invalid-feedback">
                    两次密码不一致
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label for="emailText" class="col-sm-2 offset-sm-2 col-form-label">邮箱</label>
            <div class="col-sm-6">
                <input name="text" type="email" class="form-control" id="emailText" placeholder="请输入邮箱" required>
                <div class="invalid-feedback">
                    邮箱不符合格式
                </div>
            </div>
        </div>

        <div class="form-group row">
            <!--  -->
            <div class="col-sm-4 offset-sm-4 center_btn">
                <button type="submit" class="btn btn-primary">确定</button>
            </div>
        </div>

    </form>
</body>

</html>